<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <div class="p10 tabs">
          <el-tabs v-model="activeTab" @tab-change="handleTabChange">
            <el-tab-pane v-for="item in tabList" :key="item.platform_id" :name="item.platform_id" :label="item.platform_name" />
          </el-tabs>
        </div>
        <el-input v-model="form.strategy_name" style="max-width: 240px" clearable placeholder="规则名称" />
        <el-select v-model="form.status" style="max-width: 120px" clearable placeholder="状态">
          <el-option v-for="(d, i) in statusOption" :key="i" :label="d.label" :value="d.value"></el-option>
        </el-select>
      </template>
      <template #toolbar_btns>
        <VButton type="primary" @click="add" v-hasPermi="[orderStrategyAuthList.platform_standard.add]">
          <div class="dk-iconfont icon-Plus"></div>
          新增
        </VButton>
        <VButton @click="able" v-hasPermi="[orderStrategyAuthList.platform_standard.enable]">
          <div class="dk-iconfont icon-CircleCheck text-[#3487FF]"></div>
          启用
        </VButton>
        <VButton @click="disabled" v-hasPermi="[orderStrategyAuthList.platform_standard.disable]">
          <div class="dk-iconfont icon-Disabled text-[red]"></div>
          禁用
        </VButton>
      </template>
    </VTable>

    <VLog ref="logRef" :api="api.oplog"></VLog>
    <Vedit ref="edit" :title="editTitle" class="dialogPublic" @confirm="editConfirm" />
  </VPage>
</template>
<script setup lang="jsx" name="Account">
import { organizationList, overallOptions, getPlatformOptions } from "@/api/public"
import Vedit from "./components/edit"
import api from "./api"
import VLog from "@/components/VLog"
import { onMounted, ref, toRefs } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { orderStrategyAuthList } from "@/Auth/order-strategy.js"

const edit = ref()
const data = reactive({
  editTitle: "新增",
  statusOption: [],
  marking_method: [],
  execution_condition: [],
})
const { editTitle, statusOption, marking_method, execution_condition } = toRefs(data)
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
const tabList = ref([])
const activeTab = ref(1)

//编辑
const ruleEdit = (row) => {
  editTitle.value = "编辑"
  edit.value.open(row)
}
//新增
const add = () => {
  editTitle.value = "新增"
  edit.value.open({}, activeTab.value)
}
const editConfirm = () => {
  query()
}
//删除
const profitSettingDeleteF = (id) => {
  ElMessageBox.confirm(`确定要删除？`, {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "oms-message-confirm-button",
  }).then(async () => {
    api.delete({ id }).then((res) => {
      ElMessage({ message: "删除成功！", type: "success" })
      query()
    })
  })
}
//启用
const able = () => {
  if (!getSelectRow().length) {
    return false
  }
  const arr = getSelectRow()
  api.status({ ids: arr, status: 1 }).then((res) => {
    ElMessage({ message: "启用成功！", type: "success" })
    query()
  })
}
//禁用
const disabled = () => {
  if (!getSelectRow().length) {
    return false
  }
  const arr = getSelectRow()
  api.status({ ids: arr, status: 0 }).then((res) => {
    ElMessage({ message: "禁用成功！", type: "success" })
    query()
  })
}
// 查询
const query = () => {
  tableRef?.value.query()
}

const handleTabChange = () => {
  query()
}

const initTabs = async () => {
  const res = await getPlatformOptions()
  tabList.value = res.data
}

//获取下拉数据
onMounted(() => {
  initTabs()
  overallOptions({ params: ["strategy.PlatformLabelStrategy"] }).then((res) => {
    statusOption.value = res.data.strategyPlatformLabelStrategy.status
    marking_method.value = res.data.strategyPlatformLabelStrategy.marking_method
    execution_condition.value = res.data.strategyPlatformLabelStrategy.execution_condition
  })
})
//获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({
      showClose: true,
      message: "请至少选择一条数据！",
      type: "warning",
    })
    return false
  }
  const arr = []
  getCheckboxRecords.map((e) => {
    arr.push(e.id)
  })
  return arr
}
// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      platform: "1",
      status: "",
      strategy_name: "",
    },
  },
  showOverflow: true,
  columns: [
    { type: "checkbox", fixed: "left", width: 60 },
    { field: "id", title: "ID", width: 80 },
    { field: "strategy_name", title: "规则名称", minWidth: 200 },
    { field: "priority_level", title: "优先级", width: 140 },
    { field: "execution_condition_text", title: "执行条件", minWidth: 200 },
    { field: "marking_method_text", title: "标发方式", minWidth: 180 },
    {
      title: "状态",
      field: "status_text",
      width: 100,
      slots: {
        default: ({ row }) => <VStatus value={row.status_text === "启用"} />,
      },
    },
    {
      title: "操作",
      width: 150,
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link type="primary" onClick={() => ruleEdit(row)} v-hasPermi={[[orderStrategyAuthList.platform_standard.edit]]}>
                编辑
              </el-button>
              <el-button link type="primary" onClick={() => logRef?.value.open({ id: row.id })} v-hasPermi={[[orderStrategyAuthList.platform_standard.log]]}>
                日志
              </el-button>
              <el-button link type="danger" onClick={() => profitSettingDeleteF(row.id)} v-hasPermi={[[orderStrategyAuthList.platform_standard.delete]]}>
                删除
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page, platform: activeTab.value }),
    },
  },
})
</script>
<style lang="scss" scoped>
.tabs {
  width: 100%;
  margin-top: -16px;
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
}
</style>
